<!--
 * @Author:
 * @Date: 2023-04-17 17:41:51
 * @LastEditors:
 * @LastEditTime: 2023-04-24 16:43:43
 * @FilePath: \immoka-admin\src\views\anchorManagement\songListDetails.vue
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name} , All Rights Reserved.
-->
<template>
    <div class="m-2 p-3">
      <el-card>
        <div class="top">
          <span class="title">歌单名称：</span>
          <el-input v-model="songSheetInfo.title" placeholder="" size="normal" disabled></el-input>
          <el-button v-if="songSheetInfo.id != 0" type="primary" size="default" @click="handleReset">重置</el-button>
        </div>
        <div class="bottom">
          <span class="title">歌单背景图：</span>
          <div class="img">
            <el-image
              style="width: 200px; height: 100px"
              :src="songSheetInfo.bg_picture"
              :preview-src-list="srcList">
            </el-image>
          </div>
        </div>
      </el-card>
      <el-card>
        <el-table :data="tableData" border v-loading="loading">
          <el-table-column label="序号" type="index" width="80"></el-table-column>
          <el-table-column label="歌曲名称" prop="title"></el-table-column>
          <el-table-column label="操作" width="180px">
            <template slot-scope="{row}">
              <el-button
                plain
                size="mini"
                type="danger"
                @click="handleDel(row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-dialog title="歌单名称" :visible.sync="dialogFormVisible" width="30%" @close="handleClose" :close-on-click-modal="false">
        <el-form :model="form" :rules="rules" ref="ruleForm">
          <el-form-item label="歌单名称" label-width="120px" prop="title">
            <el-input v-model="form.title" autocomplete="off" placeholder="请输入歌单名称"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  import { getExport} from "@/api/dataPanel/financial";
  import { songSheetDetail, songSheetReset, songSheetDel } from '@/api/sys/anchorList'
  export default {
    name: "financialStatements",
    data() {
      return {
        name: '',
        dialogFormVisible: false,
        loading: false,
        listQuery: {
          user_id: undefined,
          id: undefined
        },
        songSheetInfo: {
          title: '',
          bg_picture: '',
          list: [],
          id: 0
        },
        srcList: [],
        tableData: [],
        form: {
          title: '',
          type: 1,
          id: undefined
        },
        rules: {
          title: [
            { required: true, message: '请输入歌单名称', trigger: 'blur'}
          ]
        }
      };
    },
    created() {
      this.listQuery.user_id = this.$route.query.user_id
      this.listQuery.id = this.$route.query.id
      this.initData();
    },
    methods: {
      initData() {
        this.loading = true;
        songSheetDetail(this.listQuery)
          .then(res => {
            const {
              data
            } = res;
            this.tableData = data.list;
            this.songSheetInfo = data
            this.srcList = [data.bg_picture]
          })
          .finally(() => (this.loading = false));
      },
      handleReset() {
        this.$confirm('确定重置歌单名称?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.dialogFormVisible = true
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      handleConfirm() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            this.form.id = this.$route.query.id
            songSheetReset(this.form).then(res => {
              if(res.code === 200) {
                this.$message({
                  type: 'success',
                  message: '操作成功'
                });
                this.initData();
                this.dialogFormVisible = false
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      handleClose() {
        this.form.title = ''
      },
      handleResetBackgroundWall() {
        this.$confirm('确定重置歌单背景墙？重置后默认显示系统背景墙', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },

      handleDel(row) {
        this.$confirm('确定删除该歌曲？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          songSheetDel({
            id: row.id
          }).then(res => {
            if(res.code === 200) {
              this.$message({
                type: 'success',
                message: res.message
              })
              this.initData();
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      }
    }
  };
</script>

<style scoped lang="scss">
  .top {
    display: flex;
    align-items: center;
    width: 30%;

    .title{
      width: 120px;
      text-align: left;
    }
    .el-input{
      width: 200px;
      margin-right: 15px;
    }
  }
  .bottom{
    display: flex;
    align-items: flex-start;
    width: 30%;
    margin-top: 15px;

    .title{
      width: 120px;
      text-align: left;
    }
    .img{
      width: 200px;
      height: 100px;
      margin-right: 15px;

      img{
        display: block;
      }
    }
  }
</style>
